<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<button class="scale-btns" v-if="Range" @click="tabRange">范围</button>
		<view v-if="Rangebtn" class="scale-btn">
			<button @click="nationwide(0)">全国</button>
			<button @click="nationwide(1)">省级</button>
			<button @click="nationwide(2)">市级</button>
			<button @click="nationwide(3)">区</button>
		</view>
		<!-- #endif -->
		<map :latitude="latitude" :longitude="longitude" :scale="scale" :markers="markers" @markertap="markertap" @tap="mapTap" @regionchange="regionchange">
			<!-- #ifdef APP-PLUS -->
			<cover-view class="app-sty-content">
				<cover-view class="app-scale-sty" v-if="Range" @click="tabRange">范围</cover-view>
				<cover-view v-if="Rangebtn" class="app-scale-sty" @click="nationwide(0)">全国</cover-view>
				<cover-view v-if="Rangebtn" class="app-scale-sty" @click="nationwide(1)">省级</cover-view>
				<cover-view v-if="Rangebtn" class="app-scale-sty" @click="nationwide(2)">市级</cover-view>
				<cover-view v-if="Rangebtn" class="app-scale-sty" @click="nationwide(3)">区</cover-view>
			</cover-view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<cover-view v-if="showInfo" class="cover-view">
				<cover-view class="cover-view-item" @click="mapToProject">
					<cover-view class="map-to-project">{{ currentMarker.hard_name }}</cover-view>
					<cover-view class="cover-map-street">{{ currentMarker.map_street }}</cover-view>
				</cover-view>
				<cover-image @click="navigatorMap" src="../../static/img/daohang.png"></cover-image>
			</cover-view>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<!-- 在APP中地图中 悬浮组件 互相嵌套不能按 常理 绝对定位，且只有最外层事件生效 -->
			<cover-view v-show="showInfo" @click="mapToProject" class="map-to-project-app">{{ currentMarker.hard_name }}</cover-view>
			<cover-view v-show="showInfo" class="cover-map-street-app">{{ currentMarker.map_street }}</cover-view>
			<cover-view v-show="showInfo" class="img-navigate-cover" @click="navigatorMap">
				<cover-image class="cover-view-app-image" src="../../static/img/daohang.png"></cover-image>
			</cover-view>
			<cover-view v-show="showInfo" class="filler"></cover-view>
			<!-- #endif -->
		</map>
	</view>
</template>
<script>
export default {
	data() {
		return {
			latitude: '',
			longitude: '',
			markers: [],
			currentMarker: {},
			showInfo: false,
			scale: 11,
			location: '',
			Range: true,
			Rangebtn: false
		};
	},
	onLoad() {
		this.getProjectMap();
		// 获取当前位置
		this.mapget();
		console.log('当前位置的经度：' + this.longitude);
	},
	methods: {
		tabRange() {
			console.log(123);
			this.Range = !this.Range;
			this.Rangebtn = !this.Rangebtn;
		},
		nationwide(id) {
			console.log(id);
			switch (id) {
				case 0:
					this.scale = 1;
					break;
				case 1:
					this.scale = 6;
					break;
				case 2:
					this.scale = 11;
					break;
				case 3:
					this.scale = 16;
					break;
			}
		},
		mapget() {
			uni.getLocation({
				// 默认为 wgs84 返回 gps 坐标，
				// gcj02 返回国测局坐标，可用于 uni.openLocation 的坐标
				type: 'gcj02',
				geocode: true,
				success: data => {
					this.latitude = data.latitude;
					this.longitude = data.longitude;

					console.log(this.latitude + '……' + this.longitude);
				},
				fail: err => {
					console.log(err);
					// this.$api.msg('获取定位失败');
				}
			});
		},
		mapToProject() {
			// 到项目首页
			uni.navigateTo({
				url: '../myProject/projectDir?id=' + this.currentMarker.id
			});
		},
		navigatorMap() {
			// 点击导航按钮
			uni.openLocation({
				latitude: this.currentMarker.latitude,
				longitude: this.currentMarker.longitude,
				address: this.currentMarker.map_street,
				name: this.currentMarker.hard_name
			});
		},
		markertap(e) {
			// 点击标记触发
			this.showInfo = true;
			for (let i = 0; i < this.markers.length; i++) {
				if (this.markers[i].id === e.mp.markerId) {
					this.currentMarker = this.markers[i];
					this.latitude = this.markers[i].latitude;
					this.longitude = this.markers[i].longitude;
				}
			}
			console.log(this.markers);
		},
		regionchange() {
			// 视野
			console.log(this.scale);
			this.Range = true;
			this.Rangebtn = false;
		},
		mapTap() {
			// 点击地图
			this.showInfo = false;
			this.Range = true;
			this.Rangebtn = false;
		},
		getProjectMap() {
			// 获取所有项目所在位置
			uni.showLoading({
				title: '',
				mask: true
			});
			this.$request({
				url: this.$store.state.baseUrl + '/lwj/app_hard_map',
				method: 'POST',
				header: {
					token: this.$store.state.token
				},
				data: {},
				success: res => {
					if (res.data.data.total_num === 0) {
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: '暂 无 项 目 地 址'
						});
						return;
					}
					const tempLocation = res.data.data.list;

					for (let i = 0; i < tempLocation.length; i++) {
						let tempObj = {
							id: tempLocation[i].id,
							latitude: tempLocation[i].latitude,
							longitude: tempLocation[i].longitude,
							iconPath: '../../static/img/location@3x.png',
							hard_name: tempLocation[i].hard_name,
							map_name: tempLocation[i].map_name,
							map_street: tempLocation[i].map_street
						};
						this.markers.push(tempObj);
					}
					uni.hideLoading();
				},
				fail: () => {
					uni.hideLoading();
				},
				complete: () => {}
			});
		}
	}
};
</script>
<style>
map {
	width: 750upx;
	height: 100vh;
}
.app-sty-content {
	position: absolute;
	top: 0;
	right: 0upx;
	width: 200upx;
}
.app-scale-sty {
	position: relative;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-left: 22upx;
	padding-right: 28upx;
	box-sizing: border-box;
	font-size: 32upx;
	text-align: center;
	text-decoration: none;
	line-height: 2.55555556;
	border-radius: 5px;
	-webkit-tap-highlight-color: transparent;
	overflow: hidden;
	color: #000000;
	background-color: #f8f8f8;
	margin-bottom: 2upx;
}
.scale-btn {
	position: fixed;
	left: 0;
	top: 0;
	width: 200upx;
	height: 300upx;
	z-index: 11;
}
.scale-btns {
	position: fixed;
	left: 0;
	top: 0;
	width: 200upx;
	z-index: 11;
}
.cover-view {
	display: flex;
	align-items: center;
	width: 750upx;
	height: 160upx;
	background-color: #ffffff;
	position: absolute;
	bottom: 0;
}

.cover-view-item {
	margin-left: 40upx;
	/* margin: 30upx 0 30upx 40upx; */
	width: 600upx;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

.cover-view-item cover-view:nth-child(1) {
	margin-bottom: 30upx;
}

.cover-view cover-image {
	height: 90upx;
	width: 90upx;
}

.map-to-project {
	color: #007aff;
}

.cover-map-street {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
/* app 操作窗样式 */
.map-to-project-app {
	color: #007aff;
	width: 600upx;
	height: 80upx;
	position: absolute;
	bottom: 80upx;
	left: 40upx;
	background-color: white;
}

.cover-map-street-app {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	width: 600upx;
	height: 80upx;
	position: absolute;
	bottom: 0;
	left: 40upx;
	background-color: white;
}
.filler {
	width: 40upx;
	height: 160upx;
	position: absolute;
	bottom: 0;
	background-color: white;
}
.img-navigate-cover {
	height: 160upx;
	width: 150upx;
	position: absolute;
	bottom: 0;
	right: 0;
	background-color: white;
}
.cover-view-app-image {
	height: 90upx;
	width: 90upx;
	position: absolute;
	bottom: -85vh;
	right: -580upx;
}
</style>
